<template>
  <section>
    <div class="login block">
      <div class="title">{{ $t('login.loginTitle') }}</div>
      <el-form label-position="top" label-width="80px" :rules="loginRules" ref="loginForm" :model="loginInfo">
        <el-form-item :label="$t('login.phone')" prop="lmobile">
          <el-input v-model="loginInfo.lmobile"></el-input>
        </el-form-item>
        <el-form-item :label="$t('login.password')" prop="lpassword" v-if="!codeLogin">
          <el-input type="password" v-model="loginInfo.lpassword"></el-input>
        </el-form-item>
        <p class="codeLogin" @click="switchLogin" v-if="!codeLogin">{{ $t('login.codeLogin') }} ></p>
        <el-form-item :label="$t('login.code')" prop="lcaptcha" v-if="codeLogin">
          <el-input v-model="loginInfo.lcaptcha">
            <template slot="suffix">
              <el-button class="captchaBtn" type="primary" size="mini" @click="getLoginCaptcha">
                <template v-if="loginTimer == null">
                  {{ $t('login.getCode') }}
                </template>
                <template v-else>
                  {{ loginTimeDown }}s
                </template>
              </el-button>
            </template>
          </el-input>
        </el-form-item>
        <p class="codeLogin" v-if="codeLogin" @click="switchLogin">{{ $t('login.passwordLogin') }} ></p>
      </el-form>
      <el-button class="btn" type="primary" @click="userLogin">{{ $t('login.btn1') }}</el-button>
    </div>
    <div class="hr"></div>
    <div class=" register block">
      <div class="title">{{ $t('login.rtitle') }}</div>
      <el-form label-position="top" label-width="80px" :rules="rules" ref="ruleForm" :model="registerData">
        <el-form-item :label="$t('login.phone')" prop="mobile">
          <el-input v-model="registerData.mobile"></el-input>
        </el-form-item>
        <el-form-item :label="$t('login.code')" prop="captcha">
          <el-input v-model="registerData.captcha">
            <template slot="suffix">
              <el-button class="captchaBtn" type="primary" size="mini" @click="getCaptcha">
                <template v-if="timer == null">
                  {{ $t('login.getCode') }}
                </template>
                <template v-else>
                  {{ timeDown }}s
                </template>
              </el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('login.setPassword')" prop="password">
          <el-input v-model="registerData.password" type="password"></el-input>
        </el-form-item>
        <div class="privacyPolicy">
          <el-checkbox  v-model="checked">{{$t('login.l1')}} </el-checkbox><span @click="toPrivacyPolicy">{{ $t('login.l2') }}</span>
        </div>
      </el-form>
      <el-button class="btn" type="primary" @click="registerHandle">{{$t('login.btn2')}}</el-button>
      <!--      <el-button class="btn" type="primary" @click="resetHHH">重置</el-button>-->

    </div>

    <el-dialog title="隐私政策" :visible.sync="dialogVisible" width="60%" :before-close="handleClose" center fullscreen>
      <div class="privacyPolicy">
      <!-- <div class="title">《隐私政策》</div> -->
      <div class="content">
        <div v-html="privacy_policy">

        </div>
      </div>
    </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">我已知晓</el-button>
      </span>
    </el-dialog>
  </section>
</template>
<script>
import {getCaptcha, registerUser, userLogin, userMobileLogin} from "@/api/user";
import {getConfig} from "@/api/home";

export default {
  name: "login",
  data: () => ({
    checked: false,
    registerData: {},
    loginInfo: {
      lmobile: "",
      lpassword: "",
      lcaptcha: ""
    },
    rules: {
      mobile: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { len: 11, message: '请检查手机号码', trigger: 'blur' }
      ],
      captcha: [
        { required: true, message: '请输入验证码', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请设置登录密码', trigger: 'blur' },
        { min: 8, max: 20, message: '长度在 8 到 20 个字符', trigger: 'blur' }
      ],
    },
    loginRules: {
      lmobile: [
        { required: true, message: '请输入手机号码', trigger: 'blur' }
      ],
      lcaptcha: [
        { required: true, message: '请输入验证码', trigger: 'blur' }
      ],
      lpassword: [
        { required: true, message: '请设置登录密码', trigger: 'blur' },
      ],
    },

    dialogVisible: false,

    timeDown: 60,
    timer: null,
    loginTimeDown: 60,
    loginTimer: null,
    codeLogin: false,
    privacy_policy:""
  }),
  beforeDestroy() {
    clearInterval(this.timer)
  },
  created() {
    getConfig().then(res => {

      this.privacy_policy = res.data.user_privacy_policy
    }).catch(err =>{

    })
  },
  methods: {
    toPrivacyPolicy() {
      this.dialogVisible = true
      // this.$router.push('privacyPolicy')
    },
    registerHandle() {
      // return
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (this.checked) {
            registerUser(this.registerData).then(res => {
              this.$message.success("注册成功!请登录")
              this.$refs['ruleForm'].resetFields()
            }).catch(err => {
              // this.$message.warning("系统错误")
            })
          } else {
            this.$message.warning("请勾选隐私政策")
          }
        } else {
          return false;
        }
      });
    },
    getCaptcha(type) {
      // return
      if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.registerData.mobile))) {
        this.$message.warning("请检查手机号")
        return
      }
      getCaptcha({ mobile: this.registerData.mobile }).then(res => {
        this.$message.success('验证码发送成功')
        this.timer = setInterval(() => {
          if (this.timeDown == 1) {
            clearInterval(this.timer)
            this.timer = null
            this.timeDown = 60
          }
          this.timeDown -= 1
        }, 1000)
      }).catch(err => {

      })
    },

    getLoginCaptcha() {
      // return
      if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.loginInfo.lmobile))) {
        this.$message.warning("请检查手机号")
        return
      }
      getCaptcha({ mobile: this.loginInfo.lmobile, event: 'mobilelogin' }).then(res => {
        this.$message.success('验证码发送成功')
        this.loginTimer = setInterval(() => {
          if (this.loginTimeDown == 1) {
            clearInterval(this.loginTimer)
            this.loginForm = null
            this.loginTimeDown = 60
          }
          this.loginTimeDown -= 1
        }, 1000)
      }).catch(err => {

      })
    },
    closeDialog(){
      this.dialogVisible = !this.dialogVisible
    },

    userLogin() {
      this.$refs['loginForm'].validate((valid) => {
        if (valid) {
          let sendData = {
            mobile: this.loginInfo.lmobile
          };
          if (this.codeLogin) {
            sendData.captcha = this.loginInfo.lcaptcha
            userMobileLogin(sendData).then(res => {
              this.$message.success('登录成功')
              this.$store.commit("setToken", res.data.userinfo.token)
              this.$store.commit("setUserInfo", res.data.userinfo)
              localStorage.setItem("Token", res.data.userinfo.token);
              localStorage.setItem("UserInfo", JSON.stringify(res.data.userinfo));
              setTimeout(() => {
                this.$router.push({
                  name:"home"
                },() =>{})
              }, 800)
            }).catch(err => {

            })
          } else {
            sendData.password = this.loginInfo.lpassword
            userLogin(sendData).then(res => {
              this.$message.success('登录成功')
              this.$store.commit("setToken", res.data.userinfo.token)
              this.$store.commit("setUserInfo", res.data.userinfo)
              localStorage.setItem("Token", res.data.userinfo.token);
              localStorage.setItem("UserInfo", JSON.stringify(res.data.userinfo));
              setTimeout(() => {
                this.$router.push({
                  name:'home'
                },() => {
                })
              }, 800)
            }).catch(err => {

            })
          }


        } else {
          return false;
        }
      });
    },
    switchLogin() {
      this.codeLogin = !this.codeLogin
    },

  }
}
</script>

<style scoped lang="less">
section {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  padding: 50px 0;
  .block {
    .title {
      font-weight: bold;
      color: #333333;
      font-size: 24px;
      margin-bottom: 30px;
    }

    .codeLogin {
      font-size: 14px;
      font-weight: 400;
      color: #00A3E6;
      margin-bottom: 40px;
    }

    .btn {
      width: 100%;
      color: #FFFFFF;
      font-size: 16px;
    }

    .privacyPolicy {
      font-size: 14px;
      margin-bottom: 40px;

      span {
        color: #00A3E6;
      }
    }
  }

  .captchaBtn {
    font-size: 14px;
    color: #00A3E6;
    background-color: transparent;
    border: none;
  }

  .hr {
    width: 1px;
    height: auto;
    background-color: #D8D8D8;
    margin: 0 100px;
  }

  .login {
    width: 360px;

  }

  .register {
    width: 360px;
  }

}
.privacyPolicy{
    background-color: #FFFFFF;
    // width: 100%;
    // border-radius: 20px;
    .title {
      color: #333333;
      font-size: 24px;
      font-weight: 400;
      width: 100%;
      text-align: center;
      margin-bottom: 30px;
    }
    .content {
      width: 960px;
      margin: 0 auto;
      border: 1px solid #F6F6F6;
      // width: 1000px;
      height: 754px;
      padding: 20px;
      font-size: 14px;
      line-height: 24px;
      font-weight: 400;
      color: #333333;
      div{
        overflow-y: auto;
        height: 100%;
      }
    }
  }
</style>